<template>
    <div class="tenement_fifth">
        <div class="header">
            <div class="left">
                <h3><span></span>车辆进出记录</h3>
            </div>
            <div class="right">
                <el-button type="primary" class="add" @click="add">导出</el-button>
                <el-button type="warning" @click="del">批量删除</el-button>
            </div>
        </div>
        <div class="main">
            <div class="kuang">
                <el-form label-width="120px" style="margin-top: 20px;">
                    <el-form-item label="车牌号码：">
                        <el-input label="车牌号码：" placeholder="请输入车牌号码" v-model="carhaoma" />
                    </el-form-item>
                </el-form>
                <el-form-item label="进出时间：" style="margin-top: 20px;">
                    <el-col>
                        <el-form-item prop="date1">
                            <el-date-picker type="date" label="Pick a date" placeholder="请选择进出时间" style="width: 100%"
                                v-model="value" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <div style="margin-left: 135px;">
                    <el-button type="success" @click="chaxun">查询</el-button>
                    <el-button type="info" plain @click="chongzhi">重置</el-button>
                </div>
            </div>
            <div class="tableBox">
                <Table :data="tableData" @check="check" @check-all="checkAll" :keys="[
                    'check',
                    'vehicleBrand',
                    'driverId',
                    'vehicleNum',
                    'vehicleModel',
                    'vehicleType',
                    'beginTime',
                    'endTime',
                ]" :label="[
    '值',
    '车主姓名',
    '联系方式',
    '车牌号码',
    '车辆型号',
    '车辆类型',
    '开始时间',
    '结束时间',
]">
                    <template #status> 正常 </template>
                    <template #btn> <button @click="shanchu" style="margin: 0 35%;">删除</button> </template>
                </Table>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import Table from "@/components/common/MyTable.vue";
import service from "@/api/index";
import * as XLSX from 'xlsx'
import fs from 'file-saver'
var tableData: any = ref([]);
var carhaoma: any = ref()
var delid: any = ref()
var plid: any = ref([])
var str: any = ref('')
var arr: any = ref([])
var value: any = ref()
onMounted(async () => {
    var res = await service.car.carlist()
    tableData.value = res.data.data
})
//单选
var check = (select: any, row: any) => {
    delid.value = row.vehicleId
    console.log(delid.value);
}
//单删
var shanchu = async () => {
    var res = await service.car.del({ id: delid.value })
    tableData.value = tableData.value.filter(item => item.vehicleId != delid.value)
}
//多选
var checkAll = (select: any) => {
    select.forEach((item: any) => {
        plid.value.push(item.vehicleId)
    })

    for (var i = 0; i <= plid.value.length - 1; i++) {
        arr.value.push(plid.value[i])
    }
    str = arr.value.join(',')
}
//重置
var chongzhi = async () => {
    var res = await service.car.carlist()
    tableData.value = res.data.data
}
//多删
var del = async () => {
    var res = await service.car.pldel({ ids: str })
    var res1 = await service.car.carlist()
    tableData.value = res1.data.data
}
//查询
var chaxun = async () => {
    tableData.value = tableData.value.filter(item => item.vehicleNum == carhaoma.value)
}
const add = () => {
    excelExport(document.querySelector('.table'), 'mydata')
}
var excelExport = (table: any, filename: any) => {
    const wb = XLSX.utils.table_to_book(table)
    const defaultCellStyle = {
        font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
        fill: { fgColor: { rgb: 'FFFFAA00' } },
    }
    const wopts: any = {
        bookType: 'xlsx',
        bookSST: false,
        type: 'binary',
        cellStyle: true,
        defaultCellStyle: defaultCellStyle,
        showGridLines: false,
    }

    const wbout = XLSX.write(wb, wopts)
    const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
    fs.saveAs(blob, filename + '.xlsx')
}

var s2ab: any = (s) => {
    if (typeof ArrayBuffer !== 'undefined') {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
    } else {
        const buf = new Array(s.length);
        for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
    }
}
</script>
<style scoped lang="scss">
.header {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background: #fff;
    align-items: center;
    padding: 0 10px;
    padding-right: 20px;
    margin-bottom: 10px;

    h3 {
        display: flex;
        height: 100%;
        margin-left: 30px;
        font-weight: 600;

        span {
            width: 8px;
            flex: 1;
            background: rgb(94, 128, 234);
            margin-right: 15px;
        }
    }

    .right {
        .add {
            margin-right: 20px;
        }
    }
}

.tenement_fifth {
    padding: 10px;
    height: 100%;
    background: gainsboro;
}

.main {
    background-color: white;
    height: 760px;
    padding: 15px;
}

.main .kuang {
    width: 98%;
    height: 60px;
    border: 1px solid black;
    border-radius: 5px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.get {
    background-color: white;
    padding: 15px;
}

.get div {
    border-bottom: 1px solid black;
    width: 99%;
    margin: auto;
}

.get span {
    display: inline-block;
    width: 95px;
    height: 40px;
    line-height: 40px;
}

.tableBox {
    flex: 1;
    margin-top: 25px;

    .table {
        text-align: left;

        :deep(td),
        :deep(th) {
            font-weight: 400;
            border: 1px solid #eee;
            padding-left: 10px;
        }
    }
}
</style>
  